<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ANIMATION</title>
    <link rel="stylesheet" type="text/css" href="../vendor/bootstrap/dist/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../vendor/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <style>
        body {
            padding-top: 70px;
        }

        article > header .badge {
            vertical-align: middle;
            margin-right: 15px;
        }

        #transition .transition-btn{
            text-decoration: none;
            font-size: 2.25em;
            background-color: #b01c20;
            border-radius: 8px;
            color: #ffffff;
            padding: 3%;
            display: inline-block;
            background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
            margin-top: 30px;
            margin-bottom: 30px;
            box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
            text-shadow: 0 1px black;
            border: 1px solid #bfbfbf;
        }

        #transition .transition-btn.transition-color{
            transition: color 1s ease 0s;
        }

        #transition .transition-btn.transition-all{
            transition: all 1s ease 0s;
        }

        #transition .transition-btn.transition-delay{
            transition-timing-function: ease;
            transition-duration: 1s;
            transition-property:border, color, text-shadow ;
            transition-delay: 2s, 3s, 8s;
        }

        #transition .transition-btn:hover{
            border: 1px solid #000000;
            color: #000000;
            text-shadow: 0 1px white;
        }

        #transition .transition-block{
            width: 10%;
            height: 20px;
            margin: 15px 0;
            background-color: #0000ff;
            color: #fff;
        }

        #transition .transition-block:first-of-type{
            margin-top: 0;
        }

        #transition .transition-block.ease{
            transition: width 3s ease;
        }

        #transition .transition-block.ease-in{
            transition: width 3s ease-in;
        }

        #transition .transition-block.ease-out{
            transition: width 3s ease-out;
        }

        #transition .transition-block.ease-in-out{
            transition: width 3s ease-in-out;
        }

        #transition .transition-block.on{
            width: 100%;
        }

        #transform .row{
            margin: 30px 0;
        }

        #transform .btn-scale.on,
        #transform .btn-scale:hover{
            transform: scale(1.5);
        }

        #transform .btn-translate.on,
        #transform .btn-translate:hover{
            transform: translate(20px,0);
        }

        #transform .btn-rotate.on,
        #transform .btn-rotate:hover{
            transform: rotate(90deg);
        }

        #transform .btn-skew.on,
        #transform .btn-skew:hover{
            transform: skew(30deg,0deg);
        }

        #transform .row:last-of-type .btn{
            transform-origin: 0 0;
        }

        @-webkit-keyframes width {
            0%{
                width: 0;
            }
            30%{
                width: 30%;
            }
            60%{
                width: 60%;
            }
            100%{
                width: 100%;
            }
        }

        @keyframes width {
            0%{
                width: 0;
            }
            30%{
                width: 30%;
            }
            60%{
                width: 60%;
            }
            100%{
                width: 100%;
            }
        }

        #keyframe .keyframe div{
            height: 30px;
            width: 10%;
            background-color: #c7254e;
            animation-name: width;
            animation-duration: 5s;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-play-state: running;
            animation-timing-function: ease;
            animation-fill-mode: none;
            animation-direction: normal;
            -webkit-animation: width 5s infinite ease;
            margin: 15px 0;
        }

        #keyframe .keyframe .alternate{
            animation-direction: alternate;
            -webkit-animation-direction: alternate;
        }

        /*莲花花瓣的容器*/
        .box {
            position: relative;/*设置相对定位，因为花瓣都要进行绝对定位*/
            height: 600px;
        }
        /*花瓣进行绝对定位*/
        .box .leaf {
            position: absolute;
        }
        /*绘制莲花花瓣*/
        .leaf {
            margin-top: 400px;
            width: 300px;
            height: 300px;
            border-radius: 300px 0px;/*制作花瓣角*/
            background: linear-gradient(45deg,  rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
            opacity: 0.5;
            filter:alpha(opacity=50);
            transform: rotate(45deg);/*花瓣旋转45deg*/
            transform-origin:  top right;/*重置花瓣旋转原点，这个很重要*/
        }
        @-webkit-keyframes show-2 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(71deg);
            }
        }
        @-webkit-keyframes show-3 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(96deg);
            }
        }
        @-webkit-keyframes show-4 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(123deg);
            }
        }
        @-webkit-keyframes show-5 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(149deg);
            }
        }
        @-webkit-keyframes show-6 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(175deg);
            }
        }
        @-webkit-keyframes show-7 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(200deg);
            }
        }
        @-webkit-keyframes show-8 {
            0% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(225deg);
            }
        }
        .leaf:nth-child(2) {
            -webkit-animation: show-2 5s ease-in-out infinite;
        }
        .leaf:nth-child(3) {
            -webkit-animation: show-3 5s ease-in-out infinite;
        }
        .leaf:nth-child(4) {
            -webkit-animation: show-4 5s ease-in-out infinite;
        }
        .leaf:nth-child(5) {
            -webkit-animation: show-5 5s ease-in-out infinite;
        }
        .leaf:nth-child(6) {
            -webkit-animation: show-6 5s ease-in-out infinite;
        }
        .leaf:nth-child(7) {
            -webkit-animation: show-7 5s ease-in-out infinite;
        }
        .leaf:nth-child(8) {
            -webkit-animation: show-8 5s ease-in-out infinite;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#toggleWidth').click(function () {
                $(this).closest('.row').find('.transition-block').toggleClass('on');
            });

            $('#transformToggle').click(function () {
               $('#transform .row .btn').toggleClass('on');
            });
        });
    </script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ANIMATION</a>
        </div>

        <div class="collapse navbar-collapse" id="header-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#transition">Transition</a></li>
                <li><a href="#keyframe">Keyframe</a></li>
                <li><a href="#transform">Transform</a></li>
                <li><a href="#demo1">Demo1</a></li>
                <li><a href="#demo2">Demo2</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <article id="transition">
        <header>
            <h2><span class="badge">1</span>过渡(Transition)</h2>
        </header>
        <div class="row">
            <div class="col-md-3">
                <div class="text-center">
                    <a href="#" class="transition-btn">TRANSITION</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <a href="#" class="transition-btn transition-color">TRANSITION</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <a href="#" class="transition-btn transition-all">TRANSITION</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <a href="#" class="transition-btn transition-delay">TRANSITION</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-center">
                <button class="btn btn-link btn-lg" id="toggleWidth">Toggle</button>
            </div>
            <div class="col-md-9">
                <div class="transition-block">
                    normal
                </div>
                <div class="transition-block ease">
                    ease
                </div>
                <div class="transition-block ease-in">
                    ease-in
                </div>
                <div class="transition-block ease-out">
                    ease-out
                </div>
                <div class="transition-block ease-in-out">
                    ease-in-out
                </div>
            </div>
        </div>
    </article>

    <article id="keyframe">
        <header>
            <h2><span class="badge">2</span>Keyframe</h2>
        </header>
        <div class="keyframe">
            <div></div>
            <div class="alternate"></div>
        </div>
    </article>

    <article id="transform">
        <header>
            <h2>
                <span class="badge">3</span>变换(Transform)
                <button class="btn btn-link pull-right" id="transformToggle">Toggle</button>
            </h2>
        </header>
        <div class="row">
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-scale btn-lg">scale</button>
            </div>
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-translate btn-lg">translate</button>
            </div>
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-rotate btn-lg">rotate</button>
            </div>
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-skew btn-lg">skew</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-scale btn-lg">scale</button>
            </div>
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-translate btn-lg">translate</button>
            </div>
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-rotate btn-lg">rotate</button>
            </div>
            <div class="col-md-3 text-center">
                <button class="btn btn-primary btn-skew btn-lg">skew</button>
            </div>
        </div>
    </article>

    <article id="demo1">
        <header>
            <h2>
                <span class="badge">4</span>
                <a href="animation.html">莲花开放DEMO</a>
            </h2>
        </header>
        <div class="row clearfix">
            <div class="col-md-6 col-md-offset-3">
                <div class="box">
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                    <div class="leaf"></div>
                </div>
            </div>
        </div>
    </article>

    <article id="demo2">
        <header>
            <h2><span class="badge">5</span><a href="http://2012.beercamp.nclud.com/" target="_blank">2012啤酒节</a></h2>
        </header>
    </article>
</div>
</body>
</html>